import { getChangeEventValue, makeClassNameList, toastShort } from '../../utils';
import React, { useRef, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import './../home-page/HomePage.scss';
import ReportCard from '../../components/report-card/ReportCard';
import SmartMapModal from './modal/SmartMapModal';
import SpeciesNameFileModal from './modal/SpeciesNameFileModal';
import EcologicalBenefitAnalysisModal from './modal/EcologicalBenefitAnalysisModal';
import ManagementEffectivenessEvaluationModal from './modal/ManagementEffectivenessEvaluationModal';
import FillSpeciesLatinNameModal from './modal/FillSpeciesLatinNameModal';

const StatisticalAnalysis = () => {

    const smartMapModalRef = useRef(null);
    const speciesNameFileModalRef = useRef(null);
    const ecologicalBenefitAnalysisModalRef = useRef(null);
    const fillSpeciesLatinNameModalRef = useRef(null);
    const managementEffectivenessEvaluationModalRef = useRef(null);

    const [searchParams, setSearchParams] = useSearchParams();
    const [currentBelongTypeId, setCurrentBelongTypeId] = useState<'0' | '1' | '2' | '3' | '4' | '5'>('0');

    const belongTypeList = [
        {
            name: "动植物资源分析",
            id: '1',
            children: [
                {
                    title: "物种名录制作",
                    type: 'SpeciesBook',
                    cover: "http://shpfile-data-1314977817.cos.ap-guangzhou.myqcloud.com/public/202212304964d4df07-b60b-4fbb-9745-e7f171084ce455.png"
                },
                {
                    title: "保护物种名录",
                    type: 'ProtectionSpeciesBook',
                    cover: "http://shpfile-data-1314977817.cos.ap-guangzhou.myqcloud.com/public/2022123041e25e2ef2-3c02-406d-a1ac-9a37da81f03b34.png"
                },
                {
                    title: "拉丁名填充",
                    type: 'FillLatinName',
                    cover: "http://shpfile-data-1314977817.cos.ap-guangzhou.myqcloud.com/public/202212304964d4df07-b60b-4fbb-9745-e7f171084ce455.png"
                },
                {
                    title: "科属种统计分析",
                    type: 'SpeciesStatistics',
                    cover: "http://shpfile-data-1314977817.cos.ap-guangzhou.myqcloud.com/public/20221230306126ddf9-66f7-4a9f-b613-455aa193543c81.png"
                },
                {
                    title: "区系统计",
                    type: "FloraStatistics",
                    cover: "http://cskk-admin.yunnanforestry.cn/cskk-export/public/media/20231127194500_xls.png"
                },
                {
                    title: "区系分析报告",
                    type: "FloraAnalysisReport",
                    cover: "http://cskk-admin.yunnanforestry.cn/cskk-export/public/media/20231127194524_doc.png"
                },
                // {
                //     title: "重要值分析",
                //     type: "ImporrantValueAnalysis",
                //     cover: "http://cskk-admin.yunnanforestry.cn/cskk-export/public/media/20231128202935.png"
                // },
                // {
                //     title: "生物多样性分析",
                //     type: "DiversityIndexAnalysis",
                //     cover: "http://cskk-admin.yunnanforestry.cn/cskk-export/public/media/20231128202905.png"
                // },
            ]
        },
        {
            name: "自然生态分析",
            id: '2',
            children: [
                {
                    title: "植被与生态系统类型统计分析",
                    type: "VegetationAndEcosystem",
                    cover: "http://cskk-admin.yunnanforestry.cn/cskk-export/public/uploads/file-1701364773618-714891419.jpg"
                },
                {
                    title: "地类统计分析",
                    type: "LandUseTypeAnalysis",
                    cover: "http://cskk-admin.yunnanforestry.cn/cskk-export/public/uploads/file-1701395444301-317776541.jpg"
                },
                {
                    title: "环境因子分析",
                    type: "EnvironmentalFactorAnalysis",
                    cover: "http://220.163.43.218:9001/ghzs_api/assets/uploads/20231130182813.png"
                },
                {
                    title: "生态效益分析",
                    type: "EcologicalBenefitAnalysis",
                    cover: "http://cskk-admin.yunnanforestry.cn/cskk-export/public/uploads/file-1701397878379-218628030.jpg"
                }
            ]
        },
        {
            name: "社会经济分析",
            id: '3',
            children: [
                {
                    title: "社会经济统计",
                    type: "SocialEconomicStatistics",
                    cover: "http://cskk-admin.yunnanforestry.cn/cskk-export/public/uploads/file-1701399074881-341438577.jpg"
                }
            ]
        },
        // {
        //     name: "地理空间分析",
        //     id: '4',
        //     children: [
        //         {
        //             title: "自然保护地空间数据分析",
        //             cover: "http://shpfile-data-1314977817.cos.ap-guangzhou.myqcloud.com/public/202212304964d4df07-b60b-4fbb-9745-e7f171084ce455.png",
        //             type: "MapDataAnalys",
        //         }
        //     ]
        // },
        {
            name: "自然保护地管理队伍",
            id: '5',
            children: [
                {
                    title: "管理队伍",
                    type: 'ManagementOrganizationAndPersonnel',
                    cover: "http://cskk-admin.yunnanforestry.cn/cskk-export/public/uploads/file-1701405802730-881738945.jpg"
                },
                // {
                //     title: "管理成效评价",
                //     type: 'ManagementEffectivenessEvaluation',
                //     cover: "http://shpfile-data-1314977817.cos.ap-guangzhou.myqcloud.com/public/202212304964d4df07-b60b-4fbb-9745-e7f171084ce455.png"
                // }
            ]
        }
    ]

    const switchBelongType = (typeId: '0' | '1' | '2' | '3' | '4' | '5') => {
        setCurrentBelongTypeId(typeId)
        handleSetSearchParams('belong-type', typeId)
    }

    const handleSetSearchParams = (key: string, value: string) => {
        let newParams = new URLSearchParams(searchParams.toString());
        newParams.set(key, value);
        setSearchParams(newParams);
    }

    const renderBelongType = () => {
        return belongTypeList.map((belongType, index) => {
            return (
                <div
                    key={index + ''}
                    className={
                        makeClassNameList([
                            'statistical-analysis-page-top-switch-item',
                            belongType.id == currentBelongTypeId ? 'active' : null
                        ])
                    }
                    //@ts-ignore
                    onClick={() => switchBelongType(belongType.id)}
                >
                    {belongType.name}
                </div>
            )
        })
    }

    const handleOpenAnalysisModal = (analysType) => {
        // console.log("analysType--->", analysType)
        switch (analysType.type) {
            case 'SpeciesBook':
            case 'ProtectionSpeciesBook':
            case 'SpeciesStatistics':
            case 'FloraAnalysisReport':
            case 'FloraStatistics':
            case 'FloraAnalysisReport':
            case 'EnvironmentalFactorAnalysis':
            case 'VegetationAndEcosystem':
            case 'LandUseTypeAnalysis':
            case 'SocialEconomicStatistics':
            case 'ManagementOrganizationAndPersonnel':
                // case 'ManagementEffectivenessEvaluation':
                speciesNameFileModalRef.current.openModal(analysType.type);
                break
            case 'ManagementEffectivenessEvaluation':
                managementEffectivenessEvaluationModalRef.current.openModal();
                break;
            case 'EcologicalBenefitAnalysis':
                ecologicalBenefitAnalysisModalRef.current.openModal();
                break;
            case 'ImporrantValueAnalysis':
            case 'DiversityIndexAnalysis':
                toastShort('warning', '功能维护中...')
                break;
            case 'FillLatinName':
                fillSpeciesLatinNameModalRef.current.openModal();
                // toastShort('warning', '功能维护中...')
                break;
            case 'MapDataAnalys':
                smartMapModalRef.current.openModal();
                break;
            default:
                toastShort('warning', '功能维护中...')
                break;
        }

    }

    const renderCurrentBelongTypeReportCard = () => {
        const currentBelongType = belongTypeList.find(ele => {
            return ele.id == currentBelongTypeId;
        })
        return (
            <div className="flex-col side-bar-content-analysis">
                <div className='flex-row report-card-list-content'>
                    {
                        currentBelongType.children && currentBelongType.children.map((analysType, index) => {
                            return (
                                <ReportCard
                                    key={index + ''}
                                    title={analysType.title}
                                    onClick={() => handleOpenAnalysisModal(analysType)}
                                    cover={analysType.cover}
                                />
                            )
                        })
                    }
                </div>
            </div>
        )
    }

    return (
        <div
            style={{ position: 'relative' }}
            className='flex-col statistical-analysis-page'
        >
            <div className='flex-row statistical-analysis-page-top'>
                <div className='flex-row statistical-analysis-page-top-switch'>
                    <div
                        key={'-1'}
                        className={
                            makeClassNameList([
                                'statistical-analysis-page-top-switch-item',
                                '0' == currentBelongTypeId ? 'active' : null
                            ])
                        }
                        onClick={() => switchBelongType('0')}
                    >
                        {'全部'}
                    </div>
                    {
                        renderBelongType()
                    }
                </div>
            </div>
            <div
                className='statistical-analysis-list'
                style={{ overflow: 'auto' }}
            >
                {
                    currentBelongTypeId == '0' ?
                        belongTypeList.map((belongType, belongTypeIndex) => {
                            return (
                                <div
                                    key={belongTypeIndex + ''}
                                    className="flex-col side-bar-content-analysis"
                                >
                                    <div className='report-writing-type'>
                                        {belongType.name}
                                    </div>
                                    <div
                                        className='flex-row report-card-list-content'
                                    >
                                        {
                                            belongType.children && belongType.children.map((analysType, index) => {
                                                return (
                                                    <ReportCard
                                                        key={index + ''}
                                                        title={analysType.title}
                                                        onClick={() => handleOpenAnalysisModal(analysType)}
                                                        cover={analysType.cover}
                                                    />
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })
                        :
                        renderCurrentBelongTypeReportCard()
                }
            </div>
            <SmartMapModal
                ref={smartMapModalRef}
            />
            <SpeciesNameFileModal
                ref={speciesNameFileModalRef}
            />
            <EcologicalBenefitAnalysisModal
                ref={ecologicalBenefitAnalysisModalRef}
            />
            <ManagementEffectivenessEvaluationModal
                ref={managementEffectivenessEvaluationModalRef}
            />
            <FillSpeciesLatinNameModal
                ref={fillSpeciesLatinNameModalRef}
            />
        </div>
    )
}

export default StatisticalAnalysis;